@charset "utf-8";
@import "reset";
$font-size:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$font-size*1rem;
}
 //注册页面
      .register{
          position:absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #222222;
          z-index: 1;
          transform: translateX(-100%);
//        display: none;
          transition: .5s all ease-in;
          overflow-x: hidden;
          overflow-y: auto;
          .register-top-box{
              width: 100%;
              .register-top{
                  padding: r(18px) r(17px) r(17px) r(12px);
                  font-size: 0;
                  border-bottom: 1px solid #484848;
                  .close{
                      display: inline-block;
                      vertical-align: middle;
                      i{
                          font-size: r(50px);
                          color: red;
                      }
                  }
                  form{
                      padding-left: r(78px);
                      display: inline-block;
                      vertical-align: middle;
                      .search{
                          border: 1px solid #FFFFFF;
                          border-radius: 10px;
                          display: inline-block;
                          width: r(483px);
                          height: r(52px);
                          position: relative;
                          i{
                              position: absolute;
                              left: 5px;
                              top: 4px;
                              color: #FFFFFF;
                          }
                      }
                      input[type="search"]{
                          display: inline-block;
                          width: 100%;
                          height: 100%;
                          background-color: #1f1f1f;
                          border: 0;
                          border-radius: 10px;
                          padding-left: r(50px);
                      }
                  }
              }
          }
          .login-box{
              width: 100%;
              border-bottom: 24px solid #303030;
              padding-top: r(85px);
              font-size: 0;
              .login{
                  text-align: center;
                  img{
                      width: r(129px);
                      height: r(129px);
                  }
                  a{
                      font-size: 24px;
                      color: #FFFFFF;
                      text-align: center;
                      display: block;
                      padding-top: r(25px);
                  }
              }
              .forget{
                  text-align: center;
                  padding-top: r(12px);
                  padding-bottom: r(62px);
                  a{
                      color: #525252;
                      text-decoration: underline;
                      font-size: 19px;
                  }
              }
          }
          .drop-down-box{
              padding-left: r(30px);
              padding-right: r(34px);
              padding-top: r(53px);
              font-size: 0;
              li{
                  &:first-of-type{
                      .drop-down{
                          padding-top: 0;
                      }
                  }
              }
              .drop-down{
                  display: flex;
                  justify-content: space-between;
                  color: #FFFFFF;
                  border-bottom: 2px solid #282828;
                  padding-bottom: r(22px);
                  padding-top: r(34px);
                  span{
                      font-size: 18px;
                      
                  }
                  i{
                      display: inline-block;
                      vertical-align: middle;
                      line-height: 32px;
                      padding-right: r(9px);
                      transform: rotate(0);
                      transition: all 500ms; 
                  }
                  .down_i{
                        transform: rotate(90deg);
                    }
              }
              .drop-down2{
                  width:100%;
                  padding-left: r(90px);
                  padding-right: r(61px);
                  text-align: center;
                  overflow: hidden;
                  height: 0;
                  transition: all 500ms;
                  li{
                      padding-top: r(32px);
                      padding-bottom: r(31px);
                      border-bottom: 1px solid #262626;
                      a{
                          font-size: 16px;
                          color: #F5F5F5;
                      }
                  }
              }
              .down_li{
                height: 118px;
                transition: all 500ms;
            }
          }
      }
      


